<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script src="https:unpkg.com/vue@3"></script>

</body>

    <div id="app">

        <h1>知识点1：v-if</h1>
        <h3> v-if,v-else,v-else-if 他们是连续的中间不能有其他标签对</h3>
        <p>例子</p>
        <h4 v-if="order==0">我是第一行</h4>
        <h4 v-else-if="order==1">我是第二行</h4>
        <h4 v-else>我是最后一行</h4>
        <button @click="order=++order%3">切换</button>

        <h1>知识点2：v-show</h1>
        <p>例子</p>
        <h4 v-show="visible">v-show的显示</h4>
        <h4 v-if="visible">v-if的展示</h4>
        <button @click="visible =! visible">显示/隐藏</button>
        <h4>v-show是通过样式添加来实现隐藏的，v-if是通过删除标签来隐藏的，通常使用v-show来实现隐藏</h4>
        <h1>课堂练习</h1>
        <h3>通过单选框的单击事件来实现不同用户的身份显示不同的页面</h3>
        <input type="radio" value="管理员" v-model="users">管理员
        <input type="radio" value="教师" v-model="users">教师
        <input type="radio" value="学生" v-model="users">学生

        <div v-show="users != ''">
            <div v-if="users=='管理员'">
                管理员页面<button>管理</button>

            </div>
            <div v-else-if="users=='教师'">
                教师页面<button>授课</button>
            </div>
            <div v-else>
                学生页面<button>上课</button>
            </div>
        </div>

        <h1>课堂练习</h1>
        <p>请选择登录类型：</p>
        <input type="radio" value="qq" v-model="login_mode">QQ登录
        <input type="radio" value="phone" v-model="login_mode">手机登录
        <input type="radio" value="e_meal" v-model="login_mode">邮箱登录
        
        <div v-show="login_mode!=''">
            <div v-if="login_mode=='qq'">
                QQ号：<input type="text">
                QQ密码：<input type="text">
            </div>
            <div v-else-if="login_mode=='phone'">
                手机号：<input type="text">
                验证码：<input type="text">
            </div>
            <div v-else="login_mode='e_meal'">
                邮箱地址：<input type="text">
                验证码：<input type="text">
            </div>
            <button>登录</button>
        </div>

    </div>

</html>

<script>

    const connApp = Vue.createApp({

        data() {
            return {
                order:0,
                visible:true,
                users:'',
                login_mode:'phone',

            }
        },

    }).mount("#app")

</script>